<template>
  <div class="course-container">
    <h2>课程学习</h2>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="课程查询" name="search">
        <div class="filter-bar">
          <el-form :inline="true" :model="courseFilter">
            <el-form-item label="学期">
              <el-select v-model="courseFilter.semester" placeholder="请选择学期">
                <el-option label="2024-2025学年第一学期" value="2024-1"></el-option>
                <el-option label="2023-2024学年第二学期" value="2023-2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程名称">
              <el-input v-model="courseFilter.courseName" placeholder="请输入课程名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchCourses">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <el-table :data="courses" style="width: 100%" v-loading="loading">
          <el-table-column prop="courseName" label="课程名称"></el-table-column>
          <el-table-column prop="teacher" label="授课教师"></el-table-column>
          <el-table-column prop="classTime" label="上课时间"></el-table-column>
          <el-table-column prop="classroom" label="上课地点"></el-table-column>
          <el-table-column prop="credit" label="学分"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="viewCourseDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      
      <el-tab-pane label="成绩查询" name="grades">
        <el-table :data="grades" style="width: 100%" v-loading="loading">
          <el-table-column prop="courseName" label="课程名称"></el-table-column>
          <el-table-column prop="teacher" label="授课教师"></el-table-column>
          <el-table-column prop="credit" label="学分"></el-table-column>
          <el-table-column prop="score" label="成绩">
            <template #default="scope">
              <span :style="{ color: scope.row.score >= 60 ? 'green' : 'red' }">
                {{ scope.row.score }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    
    <el-dialog v-model="detailDialogVisible" title="课程详情" width="50%">
      <el-form :model="selectedCourse" label-width="100px">
        <el-form-item label="课程名称:">
          <span>{{ selectedCourse.courseName }}</span>
        </el-form-item>
        <el-form-item label="授课教师:">
          <span>{{ selectedCourse.teacher }}</span>
        </el-form-item>
        <el-form-item label="上课时间:">
          <span>{{ selectedCourse.classTime }}</span>
        </el-form-item>
        <el-form-item label="上课地点:">
          <span>{{ selectedCourse.classroom }}</span>
        </el-form-item>
        <el-form-item label="学分:">
          <span>{{ selectedCourse.credit }}</span>
        </el-form-item>
        <el-form-item label="课程描述:">
          <span>{{ selectedCourse.description }}</span>
        </el-form-item>
      </el-form>
      
      <el-divider>作业列表</el-divider>
      
      <el-table :data="selectedCourse.assignments" style="width: 100%">
        <el-table-column prop="name" label="作业名称"></el-table-column>
        <el-table-column prop="deadline" label="截止时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'submitted' ? 'success' : 'warning'">
              {{ scope.row.status === 'submitted' ? '已提交' : '未提交' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="submitAssignment(scope.row)" 
                       :disabled="scope.row.status === 'submitted'">
              {{ scope.row.status === 'submitted' ? '查看' : '提交' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CourseList',
  data() {
    return {
      activeTab: 'search',
      loading: false,
      courseFilter: {
        semester: '2024-1',
        courseName: ''
      },
      courses: [
        {
          id: 1,
          courseName: '高等数学',
          teacher: '张教授',
          classTime: '周一 8:00-9:30',
          classroom: 'A101',
          credit: 4,
          description: '高等数学是理工科学生必修的重要基础课程',
          assignments: [
            { id: 1, name: '第一章习题', deadline: '2024-10-25', status: 'submitted' },
            { id: 2, name: '第二章习题', deadline: '2024-11-01', status: 'pending' }
          ]
        },
        {
          id: 2,
          courseName: '大学英语',
          teacher: '李老师',
          classTime: '周二 10:00-11:30',
          classroom: 'B205',
          credit: 3,
          description: '提升学生的英语综合应用能力',
          assignments: [
            { id: 3, name: 'Unit 1 背诵', deadline: '2024-10-20', status: 'submitted' },
            { id: 4, name: 'Unit 2 作文', deadline: '2024-10-27', status: 'pending' }
          ]
        }
      ],
      grades: [
        { courseName: '高等数学', teacher: '张教授', credit: 4, score: 85 },
        { courseName: '大学英语', teacher: '李老师', credit: 3, score: 92 },
        { courseName: '计算机基础', teacher: '王教授', credit: 3, score: 78 }
      ],
      detailDialogVisible: false,
      selectedCourse: {}
    }
  },
  methods: {
    searchCourses() {
      this.loading = true
      // 模拟搜索延迟
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    viewCourseDetail(course) {
      this.selectedCourse = course
      this.detailDialogVisible = true
    },
    submitAssignment(assignment) {
      this.$message.info(`提交作业: ${assignment.name}`)
    }
  }
}
</script>

<style scoped>
.course-container {
  padding: 20px;
}

.filter-bar {
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>